<template>
  <div class="customer-add">
    <c-table
      :data="customerList.pageData"
      :total="customerList.total"
      :columns="columns"
      rowKey="companyId"
      :loading="loading"
      selection
      :selectedRowKeys="selectedIds"
      search
      @onSearch="onSearch"
      @onSelectChange="onSelectChange"
      @pageChange="pageChange"
      @onReload="reload"
    >
      <template v-slot:header-l>
        <c-button type="primary" ghost @click="backToList"
          ><c-icon type="fanhui"></c-icon>返回客户列表</c-button
        >
        <c-button
          type="primary"
          @click="confirm"
          :loading="submitLoading"
          :disabled="selectedIds.length === 0"
          >确认添加</c-button
        >
        <span>已选中 {{ selectedIds.length }} 个客户</span>
      </template>
      <!-- <template v-slot:header-r>
        <c-search-box v-model="searchKey" @search="reload"></c-search-box>
      </template> -->
    </c-table>
  </div>
</template>

<script>
import { getAddCustomers, addCustomers } from "@/api/customer";

const columns = [
  {
    title: "公司全称",
    dataIndex: "companyName"
  },
  {
    title: "联系人",
    dataIndex: "realName"
  },
  {
    title: "联系电话",
    dataIndex: "phone"
  }
];

export default {
  data() {
    return {
      customerList: [],
      columns,
      loading: false,
      searchKey: undefined,
      pageNum: 1,
      selectedIds: [], // 已选中的客户id
      submitLoading: false
    };
  },
  watch: {
    pageNum() {
      this.init();
    }
  },
  methods: {
    // 搜索
    onSearch(val) {
      this.searchKey = val;
      this.reload();
    },
    // 返回客户列表
    backToList() {
      // this.$emit("change", 0);
      this.$router.push({ name: "customerSelfList" });
    },
    // 勾选客户触发
    onSelectChange(selectedRows) {
      // 更新selecedIds
      this.selectedIds = selectedRows;
    },
    // 确认添加
    confirm() {
      this.submitLoading = true;
      addCustomers(this.selectedIds)
        .then(() => {
          let _this = this;
          this.init();
          this.$success({
            title: "添加成功",
            // JSX support
            content: (
              <div>
                <p>
                  恭喜，已成功添加客户，新客户的点价额度为0，记得为客户添加额度哦，不然客户无法和您进行点价交易。
                </p>
              </div>
            ),
            onOk() {
              _this.$router.push({ name: "customerSelfList" });
            }
          });
        })
        .finally(() => {
          this.submitLoading = false;
        });
    },
    pageChange(page) {
      this.pageNum = page;
    },
    reload() {
      this.selectedIds = [];
      // this.pageNum = 1;
      this.init();
    },
    init() {
      this.loading = true;
      getAddCustomers({
        customerName: this.searchKey,
        pageData: {
          pageNum: this.pageNum,
          pageSize: 20
        }
      })
        .then(res => {
          this.customerList = res;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  created() {
    this.init();
  }
};
</script>
